import React from 'react';
import styles from '@/assets/pay/pay.module.css'

export default () => {
    const [payid] = useState(React.params('payid') || 0)

    // 订单状态
    const [order, SetOrder] = useState<any>({})

    // 倒计时显示内容
    const [minuteShow, SetMinuteShow] = useState<string>('0分')
    const [secondShow, SetSecondShow] = useState<string>('0秒')

    // 超时状态
    const [isTimeout, SetIsTimeout] = useState<boolean>(false)

    // 定时器引用（使用useRef保持持久化引用）
    const timers = useRef<NodeJS.Timeout | null>(null)
    const intervalRef = useRef<NodeJS.Timeout | null>(null)

    // 倒计时总时间
    const maxtime = useRef(0)

    // 超时状态引用
    const isTimeoutRef = useRef(isTimeout)

    // 订单信息引用
    const orderRef = useRef(order)

    // 请求中止控制器
    const abortControllerRef = useRef(new AbortController())

    useEffect(() => {
        // 同步最新状态
        isTimeoutRef.current = isTimeout
        orderRef.current = order
    }, [isTimeout, order])

    useEffect(() => {
        GetOrderData()

        // 组件卸载时的清理函数
        return () => {
            CleanupResource()
        }
    }, [])


    // 清除资源（定时器、中止正在进行的请求、初始化定时器）
    const CleanupResource = () => {
        // 清除定时器
        if(timers.current) clearInterval(timers.current)
        if(intervalRef.current) clearInterval(intervalRef.current)

        // 中止正在进行的请求
        abortControllerRef.current.abort()

        // 初始化定时器
        timers.current = null
        intervalRef.current = null
    }

    // 获取订单信息
    const GetOrderData = async () => {
        CleanupResource()
        abortControllerRef.current = new AbortController()

        try {
            // 发送支付信息请求（携带中止信号）
            const result = await React.request.post('/pay/PayInfo', { payid }, { signal: abortControllerRef.current.signal })

            if(result.code === 1)
            {
                SetOrder(result.data)

                // 初始化倒计时定时器
                SetIsTimeout(false)
                maxtime.current = 180

                // 倒计时定时器
                timers.current = setInterval(CountDown, 1000)

                // 状态定时器
                intervalRef.current = setInterval(GetStatus, 1000)
            } else
            {
                React.toast(result.msg, 'fail' ,() => React.navigate(-1))
            }
        } catch(error) {}
    }

    // 倒计时
    const CountDown = React.useCallback(() => {
        if(maxtime.current >= 0)
        {
            // 计算剩余时间
            const minutes = Math.floor(maxtime.current / 60)
            const seconds = maxtime.current % 60

            // 更新计时器显示
            SetMinuteShow(`${minutes}分`)
            SetSecondShow(`${seconds}秒`)

            maxtime.current -= 1
        } else
        {
            HandleTimeout()
        }
    }, [])

    // 倒计时结束
    const HandleTimeout = () => {
        if(!isTimeoutRef.current)
        {
            SetIsTimeout(true)
            CleanupResource()

            // 更新订单支付过期状态
            SetOrder((prev: any) => ({
                ...prev,
                wxcode: require('@/assets/pay/images/qrcode_timeout.png'),
                zfbcode: require('@/assets/pay/images/qrcode_timeout.png')
            }))

            // 过期提示
            React.UI.Dialog.alert({
                title: '支付提示',
                content: '订单已失效',
                confirmText: '确定',
                onConfirm: () => React.navigate(-1)
            })
        }
    }

    // 检查订单状态（是否已支付）
    const GetStatus = async () => {
        try {
            const result = await React.request.post('/pay/PayStatus', {payid}, {signal: abortControllerRef.current.signal})

            if(result.code === 1)
            {
                // 保存一个是从收银台跳转到订单详情的
                React.cookies.save('action', 'payment', {path: '/'})
                
                React.toast(result.msg, 'success', React.navigate(result.data.jump))

                SetIsTimeout(true)
                CleanupResource()
            }

            if(result.code !== 1 && result.msg === '支付订单不存在')
            {
                React.toast(result.msg, 'fail', 'back')
                return false
            }
        } catch(error) {}
    }

    // 复制金额
    const OnCopy = () => {
        const text = order.price?.toString() || ''

        navigator.clipboard.writeText(text)
            .then(() => React.toast('已复制金额到剪切板', 'success'))
            .catch(() => React.toast('复制失败，请稍后重试', 'fail'))
    }


    return (
        <div className={styles.mod_ct}>
            <h1 className={styles.mod_title}>
                <span className={order.type === "zfb" ? "ico_log ico-4" : "ico_log ico-3"}></span>
            </h1>

            <div style={{ marginTop: '10px' }}>
                <span style={{ color: 'red' }}>
                    提示：付款金额要与显示的金额一致，否则后果自负
                </span>
            </div>

            <div className={styles.amount} id='money'>
                ￥<span className={styles.amount2}>{order.price}</span>元
                    <span 
                        style={{ fontSize: '10px', color: 'darkcyan' }} 
                        onClick={OnCopy}
                    >
                        &nbsp;&nbsp;复制金额
                    </span>
            </div>

            <div className="qrcode-img-wrapper">
                <div className="qrcode-img-area">
                    <img 
                        src={order.type === 'wx' ? order.wxcode : order.zfbcode} 
                        style={{ width: '220px' }} 
                        alt="支付二维码"
                    />
                </div>
            </div>

            <div className={styles.time_item} style={{ paddingTop: '10px' }}>
                <div className={styles.time_item}>
                    <h1>订单名称：<span>{order.name}</span></h1>
                </div>
                <div className={styles.time_item}>
                    <h1>订单号：<span>{order.code}</span></h1>
                </div>
                <strong>订单支付有效期</strong>
                <strong>{minuteShow}</strong>
                <strong>{secondShow}</strong>
            </div>

            <div className={styles.tip}>
                <div className={styles.ico_scan}></div>
                <p>{order.type === 'wx' ? '打开微信扫一扫' : '打开支付宝扫一扫'}</p>
            </div>
        </div>
    )
}